<template>
  <div>
    <div class="personage">
      <div class="userprofile">
        <img src alt>
      </div>
      <div class="userprofile_p">
        <p>张三李四王五</p>
        <p>1234567</p>
        <p>25</p>
      </div>
      <div class="userprofile_set">
        <img src="../../../public/img/footer/set.png" alt>
      </div>
    </div>
    <div class="div_hr"></div>
    <div class="myorder">
      <p>我的订单</p>
      <p>更多></p>
    </div>
    <!-- 分类页面 -->
    <div class="classnumber">
      <ul>
        <li>
          <img src alt>
          <p>待付款</p>
        </li>
        <li>
          <img src alt>
          <p>待发货</p>
        </li>
        <li>
          <img src alt>
          <p>待收货</p>
        </li>
        <li>
          <img src alt>
          <p>退换货</p>
        </li>
      </ul>
    </div>
    <!-- 签到 -->
    <div class="">
      <ul>
        <li>
          <img src alt>签到
        </li>
        <li>
          <img src alt>我的合伙人
        </li>
        <li>
          <img src alt>资产
        </li>
        <li>
          <img src alt>提现记录
        </li>
        <li>
          <img src alt>我的二维码
        </li>
        <li>
          <img src alt>地址管理
        </li>
        <li>
          <img src alt>排单情况
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oder: []
    };
  },
  methods: {
    getdata() {
      this.$axios.get("http://localhost:8080/abc").then(data => {
        this.oder = data.data.oder;
        console.log(this.oder);
      });
    }
  }
};
</script>

<style scoped>
div.personage {
  position: relative;
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  height: 150px;
}
div.userprofile {
  position: absolute;
  height: 100px;
  width: 100px;
  background: red;
  left: 30px;
  top: 30px;
}
div.userprofile_p {
  position: absolute;
  left: 150px;
  top: 30px;
}
div.userprofile_set {
  position: absolute;
  right: 20px;
  top: 30px;
}
div.div_hr {
  height: 10px;
  width: 100%;
  background: #f7f7f7;
}
div.myorder {
  display: flex;
  justify-content: space-between;
  height: 30px;
  border-bottom: 1px solid #ebebf3;
}
div.classnumber ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
</style>
